<template>
  <div>
    <el-form label-width="120px" v-model="truckTypeData">
      <el-form-item label="车辆类型名称">
        <el-input v-model="truckTypeData.name"/>
      </el-form-item>
      <el-form-item label="准载重量(千克)">
        <el-input type="number" v-model="truckTypeData.allowableLoad"/>
      </el-form-item>
      <el-form-item label="准载体积(方)">
        <el-input type="number" v-model="truckTypeData.allowableVolume"/>
      </el-form-item>
      <el-form-item label="长(米)">
        <el-input type="number" v-model="truckTypeData.measureLong"/>
      </el-form-item>

      <el-form-item label="宽(米)">
        <el-input type="number" v-model="truckTypeData.measureWidth"/>
      </el-form-item>
      <el-form-item label="高(米)">
        <el-input type="number" v-model="truckTypeData.measureHigh"/>
      </el-form-item>

      <el-form-item label="货物类型">
        <el-select v-model="truckTypeData.goodsTypeIds" :multiple="true" placeholder="选择货物类型">
          <el-option
            v-for="item in orderTypeData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="addTruckType">添加</el-button>
  </div>
</template>

<script>

import truckType from '@/api/base/truckType/index'

export default {
  name: 'add',
  data() {
    return {
      truckTypeData: {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '',
        measureWidth: '',
        measureHigh: '',
        goodsTypeIds: []
      },
      orderTypeData: []
    }
  },
  methods: {
    addTruckType() {
      truckType.addTruckType(this.truckTypeData).then(data => {
        this.$message({
          type: 'success',
          message: '车辆类型添加成功!',
          showClose: true
        })
        this.$router.push({ path: '/truckType-index' })
      })
    },
    getOrderTypeAll() {
      truckType.getOrderTypeAll().then(data => {
        this.orderTypeData = data.data
      })
    }
  }, mounted() {
    this.getOrderTypeAll()
  }
}
</script>

<style scoped>

</style>
